<template>
  <a-layout>
    <a-card title="本机构昨日交易数据">
      <a-list :grid="{ gutter: 16, column: 4 }">
        <a-list-item align="center" class="rightLine">
          <a-row>
            <span>交易金额</span>
          </a-row>
          <a-row>
            <span class="onDivUnit">￥</span>
            <span class="oneDivValue">{{ paySucAmt }}</span>
          </a-row>
        </a-list-item>
        <a-list-item align="center" class="rightLine">
          <a-row>
            <span>交易笔数</span>
          </a-row>
          <a-row>
            <span class="oneDivValue">{{paySucCnt}}</span>
            <span class="onDivUnit">笔</span>
          </a-row>
        </a-list-item>
        <a-list-item align="center" class="rightLine">
          <a-row>
            <span>笔均单价</span>
          </a-row>
          <a-row
          ><span class="onDivUnit">￥</span>
            <span class="oneDivValue">{{ averagePrice }}</span>
          </a-row>
        </a-list-item>
        <a-list-item align="center">
          <a-row>
            <span>昨日进件数据 (新增商户数)</span>
          </a-row>
          <a-row>
            <span class="oneDivValue">{{ entryMchntCnt }}</span>
            <span class="onDivUnit">个</span>
          </a-row>
        </a-list-item>
      </a-list>
    </a-card>
  </a-layout>
</template>
<script>
  import {mapState} from "vuex"

  export default {
    name: "TradeData",
    props: {},
    data() {
      return {
        txnDate: [], //统计日期
        paySucAmt: [], //交易金额
        paySucCnt: [], //交易笔数
        averagePrice: [], //笔均单价
        entryMchntCnt: 0, //昨日进件数据
        maxPaySucCnt: 0,
        maxPaySucAmt: 0
      };
    },

    computed: {
      ...mapState({
        user: state => state.account.user,
      }),
    },

    mounted() {
      this.init();
    },
    methods: {
      gettcTxnStatis() {
        let params = {}
        params.userId = this.user.id;
        //七日交易趋势+本机构昨日交易数据
        this.$get("/admin/csmc/tcTxnStatis/getTxnStatis", {...params}).then((res) => {
          console.log("res====", res);
          if (!res) {
            return false;
          }
          let yestdayTrans = res.data.yestdayTrans;
          if (yestdayTrans != undefined) {
            if (yestdayTrans !== null) {
              this.paySucAmt = parseFloat(yestdayTrans[0].TOTALTRANSAMT).toFixed(2);
              this.paySucCnt = yestdayTrans[0].TOTALTRANSNUM;
              this.averagePrice = parseFloat(yestdayTrans[0].AVGTRANSAMT).toFixed(2);
            }
          } else {
            this.paySucAmt = 0;
            this.paySucCnt = 0;
            this.averagePrice = 0;
          }

        });
      },

      newMchntCount() {
        //昨日进件数据
        let params = {}
        params.userId = this.user.id;
        this.$get("/admin/mcmp/bMchntBaseInfo/newMchntCount", {...params}).then((res) => {
          // console.log("======res====", res);
          if (!res) {
            return false;
          }
          this.entryMchntCnt = res.data.count;
          console.log("======entryMchntCnt====", this.entryMchntCnt);

        });
      },
      init() {
        this.gettcTxnStatis();
        this.newMchntCount();
      },
    },
  };
</script>
<style scoped>

  .rightLine {
    border-right: 1px solid #e0e0e0;
  }

  .oneDivValue {
    color: #333;
    font-size: 24px !important;
    margin-top: 8px;
    line-height: 1.5;
  }

  .onDivUnit {
    font-size: 14px !important;
    margin-left: 8px;
  }
</style>
